<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>comment</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../assets/css/public.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="../assets/js/ajax/api.js"></script>
</head>
<style>


</style>
<body>
<div id="app">
    <el-card class="box-card">
        <template>
            <div style="text-align: right;">
                <el-button type="primary" @click="savedialogVisible = true" size="small" plain>添加</el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="编号">
                                <span>{{ props.row.id }}</span>
                            </el-form-item>
                            <el-form-item label="叙事场地编号">
                                <span>{{ props.row.placeId }}</span>
                            </el-form-item>
                            <el-form-item label="星级">
                                <span>{{ props.row.grade }}</span>
                            </el-form-item>
                            <el-form-item label="点评内容">
                                <span>{{ props.row.content }}</span>
                            </el-form-item>
                            <el-form-item label="用户名">
                                <span>{{ props.row.userId }}</span>
                            </el-form-item>
                            <el-form-item label="点评时间">
                                <span>{{ props.row.date }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="叙事场地编号"
                        prop="placeId">
                </el-table-column>
                <el-table-column
                        label="星级"
                        prop="grade">
                </el-table-column>
                <el-table-column
                        label="用户名"
                        prop="userId">
                </el-table-column>
                <el-table-column
                        label="点评时间"
                        prop="date">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block pagehelp">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="page.pagesizes"
                        :page-size="page.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                </el-pagination>
            </div>
        </template>
    </el-card>
    <el-dialog class=""
               title="添加"
               :visible.sync="savedialogVisible"
               width="30%"
               :before-close="handleClose">
        <el-form label-width="80px" :model="saveform">
            <el-form-item label="场地编号:">
                <el-input v-model="saveform.placeId"></el-input>
            </el-form-item>
            <el-form-item label="星级:">
                <el-input v-model="saveform.grade"></el-input>
            </el-form-item>
            <el-form-item label="点评内容:">
                <el-input v-model="saveform.content"></el-input>
            </el-form-item>
            <el-form-item label="用户名:">
                <el-input v-model="saveform.userId"></el-input>
            </el-form-item>
            <el-form-item label="点评时间:">
                <el-input v-model="saveform.date"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>


</body>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [],
            savedialogVisible: false,
            page: {
                pagesizes: [5, 10, 15, 20, 50],
                pagesize: 10,
                total: 100
            },
            saveform: {
                name: '',
                region: '',
                type: ''
            }
        },
        mounted() {
            console.log("11")
            this.getData(this.page.pagesize, 1)


        },
        methods: {
            t() {

                this.getData(this.page.pagesize, 1);
            },
            handleSizeChange(val) {
                this.page.pagesize = val
                this.getData(this.page.pagesize, 1)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData(this.page.pagesize, val)
            },
            handleClose(done) {
                done();
            },
            getData(pageSize, pageNum) {
                let arg = {
                    pageSize,
                    pageNum
                }
                let data = StandardPost_get('comment/list', arg)
                this.tableData = data.list;
                this.page.total = data.total;
            }
        }

    })
</script>
</html>
